<template>
    <div class='swiper-main'>
		<swiper :options="swiperOption">
		  <swiper-slide 
			v-for='(item,index) in swiperList' 
			:key='index'
		   >
			<img :src="item.imgUrl" alt="">
		  </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
		</swiper>
		
	</div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'Swiper',
  props:{
    swiperList : Array,
  },
  data(){
    return{
		// swiperList:[
		// 	{
		// 		id:1,
		// 		imgUrl:'./images/swiper1.jpeg'
		// 	},
		// 	{
		// 		id:2,
		// 		imgUrl:'./images/swiper2.jpeg'
		// 	},
		// 	{
		// 		id:3,
		// 		imgUrl:'./images/swiper3.jpeg'
		// 	}
		// ],
		swiperOption: {//swiper3 具体使用看vue-awesome-swiper的使用说明 太高版本不行就下载低版本
			autoplay: {
                delay: 2500,
                disableOnInteraction: false//是否禁用自动播放 默认为是
                },
			speed: 800,
            loop: true, // 开启循环模式
			pagination: {
				el: '.swiper-pagination',
                dynamicBullets: true,
                clickable: true, 
			}
		}
    }
  },
  components: {
    swiper,
    swiperSlide
  },
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
.swiper-main{
    position: relative;
    width: 100%;
    height: (165 / @rootsize);
    img{
        width: 100%;
        height: (165 / @rootsize);
    }
    .swiper-pagination{
        width: 100%!important;
    }
    ::v-deep .swiper-pagination-bullet-active{
        background-color: #b0352f;
    }
    .swiper-pagination-bullet{
        margin: 0 (4 /@rootsize);
    }
}
</style>